<template>
    <div>
        <MyTitle title="用户新增"></MyTitle>
        <FormAdd ref="formRef" #default="{ model }" :rules="rules" confirmText="新增用户" @addForm="addForm">
            <el-form-item label="用户名称" prop="username">
                <el-input clearable v-model="model.username" type="text" placeholder="请输入用户名称" autocomplete="off" />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input clearable v-model="model.phone" type="text" placeholder="请输入联系方式" autocomplete="off" />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input clearable v-model="model.password" disabled type="text" placeholder="请输入登录密码"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户角色" prop="role" v-if="userInfo">
                <el-select v-model="model.role" size="middle" style="width:100%;" placeholder="请选择用户角色">
                    <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"
                        v-show="userInfo.role > item.value" />
                </el-select>
            </el-form-item>
        </FormAdd>
    </div>
</template>

<script lang="ts" setup>
import { toRefs, computed, reactive, ref, onMounted } from 'vue';
import { Http } from '../../api/api';
import router from '../../router';
import { useStore } from '../../store';
import { reg } from '../../utils/validate';

const formRef = ref<any>()
const store = useStore()

const roleList: any = computed(() => store.roleList)
const userInfo: any = computed(() => store.userInfo)

const rules = reactive<any>({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            pattern: reg.phone,
            message: '手机号格式不正确'
        }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        {
            pattern: reg.pwd,
            message: '请输入6-16位数字加字母的密码'
        }
    ],
    role: [
        { required: true, message: '请选择用户权限', trigger: 'blur' },
    ],
})

const addForm = async (model: any) => {
    let res = await Http.adduser(model) as any;
    if (res.code == 200) {
        router.push('/user/list')
    }
}

onMounted(() => {

    formRef.value.model.password = 'qwe123'
})

</script>
